<template>
  <view class="pages">
    <!-- #ifdef APP-PLUS -->
    <div class="status_bar"></div>
    <!-- #endif -->
    <view class="top">
      <my-collect
        :status="companyInfo.favorite"
        :company_id="companyInfo.supplier_id"
        :from="'shop'"
      ></my-collect>
      <view class="card row_between">
        <view class="card-left column_evenly">
          <view class="card-left-title one_ellipsis">
            {{ companyInfo.company_name || "暂无数据" }}
          </view>
          <view class="card-left-tab column_start">
            <view class="tip row_between">
              <span class="tip-content one_ellipsis">{{
                companyInfo.categorys
              }}</span>
              <span class="tip-sold"
                >已售 {{ companyInfo.order_count || "0" }}</span
              >
            </view>
            <view class="condition">
              <view class="title time">
                <image src="../../static/images/time.png"></image>
                <span class="times"
                  >{{ companyInfo.open_time | timeFilter }} -
                  {{ companyInfo.end_time | timeFilter }}</span
                >
              </view>
              <view class="title">
                <span class="money"
                  >￥{{
                    companyInfo.starting_price || "0"
                  }}</span
                >起送
              </view>
            </view>
            <view class="address">
              <span class="address-info one_ellipsis"
                >地址：{{
                  companyInfo.address || "暂无"
                }}</span
              >
              <!--  @click.stop="call(item.company_details.site_phone)" -->
              <!-- <view class="iphone">
                <image src="/static/image/iphone.png"></image>
              </view> -->
            </view>
          </view>
        </view>
        <view class="card-right">
          <image
            :src="
            'https://copartner.oss-cn-beijing.aliyuncs.com/' +
              companyInfo.site_logo||
              '../../static/image/logo.jpg'
            "
          >
          </image>
        </view>
      </view>
    </view>

    <view class="contents">
      <div class="contents-shop">
        <cate-gorize
          ref="cateGorize"
          :type="type"
          :first_list="first_list"
          :second_list="second_list"
          @toggleTab="toggleTab"
          :currentClass="currentClass"
          @selectSecond="change"
          @selectSecond2="selectSecond"
          :newSecondIndex="newSecondIndex"
        >
          <div
            slot="shop"
            :style="{ height: `calc(100vh - 122rpx - 260rpx - 120rpx - ${computeHeight})` }"
          >
            <scroll-view
              scroll-y="true"
              class="all_good_height"
              @scrolltolower="onReachBottoms"
            >
              <div
                class="shop"
                v-for="(item, index) in goods_list"
                :key="index"
                @click="detailPage(index, item.id)"
              >
                <image class="shop-image" :src="item.img" mode="aspectFit"></image>
                <div class="shop-info">
                  <div style="display: flex; align-items: center">
                    <image
                      v-if="item.datum_activity == '满减'"
                      style="width: 40rpx; height: 24rpx; margin-right: 10px"
                      src="/static/image/manjian.svg"
                    ></image> 
                    <image
                      v-if="item.datum_activity == '满赠'"
                      style="width: 40rpx; height: 24rpx; margin-right: 10px"
                      src="/static/image/manzeng.svg"
                    ></image>
                    <span class="title">{{ item.name }}</span>
                  </div>
                  <div class="shop-info-price" v-if="canshowprice">
                    {{ item.showPrice }}
                    <text
                      v-if="item.spu && item.spu.length == 1 && item.spu[0].current_price == 0"
                      style="font-size: 20rpx"
                    >
                      /{{ item.spu[0].unit }}</text
                    >
                    <my-stepper
                      class="shop-info-btn"
                      :val="item.willBuyNum"
                      :min="item.minimum"
                      :limit="item.designated_inventory"
                      :inventory="item.inventory_left"
                      :index="index"
                      @plus="addAction(item, index, $event)"
                      @minus="subAction"
                      @showKey="
                        showFooter = false
                        $refs.keyboard.open(
                          item.is_standard,
                          index,
                          item.minimum,
                          item.inventory_left,
                          item.designated_inventory
                        )
                      "
                    >
                    </my-stepper>
                  </div>
                  <div class="shop-info-tips">
                    <div class="flex-center" v-for="(i, index) in item.datum" :key="index">
                      {{ i.title }}
                    </div>
                  </div>
                  <div class="flex-middle">
                    <span class="shop-info-rise" v-if="item.minimum > 0"
                      >起订量 :
                      <span style="margin-left: 10rpx">{{ item.minimum }}</span></span
                    >
                    <span class="shop-info-rise" v-if="item.designated_inventory > 0"
                      >库存 :
                      <span style="margin-left: 10rpx">{{
                        item.inventory_left
                      }}</span></span
                    >
                  </div>
                  <span class="remarks" v-if="item.spu.length == 1">{{
                    item.spu[0].describe || ""
                  }}</span>  
                </div>
              </div>
              <div class="prompt tonext" v-if="toNext" @click="toNextAction">
                {{ bottomText }}
                <text style="color: red; margin-left: 10rpx">{{
                  next_category_name
                }}</text>
              </div>
              <view class="nodata" v-if="!goods_list.length">
                <image :src="nodataImg" mode="aspectFit"></image>
                <view>该分类暂时还没有商品~</view>
              </view>
            </scroll-view>
          </div>
        </cate-gorize>
        <!-- <div class="classifi" :style="classiLength">
          <div
            class="classifi-item column_start"
            v-for="(item, index) in classifiList"
            :key="index"
            @click="navTo(item, index)"
          >
            <image :src="item.icon || '../../static/image/logo.jpg'"></image>
            <span class="classifi-item-span one_ellipsis">{{
              item.name || "暂无"
            }}</span>
          </div>
        </div> -->
      </div>
      <!-- 精选专题Selected topics -->
      <!-- <div class="topics">
        <span class="Selected">精选专题</span>
        <div class="images" v-if="project_list.length">
          <img
            :src="project_list[0].img"
            alt=""
            class="lis1"
            @click="lis(project_list[0])"
          />
          <img
            :src="project_list[1].img"
            alt=""
            class="lis2"
            @click="lis(project_list[1])"
          />
          <img
            :src="project_list[2].img"
            alt=""
            class="lis3"
            @click="lis(project_list[2])"
          />
        </div>
      </div> -->

      <!-- 商品 -->
      <div class="suggest" v-if="false">
        <div class="flex-center sell">
          <image src="../../static/images/tit-icon-l.png"></image>
          <span>为你推荐</span>
          <image src="../../static/images/tit-icon-r.png"></image>
        </div>
        <view class="shopBox" :style="shopLists">
          <!-- <scroll-view scroll-y="true" :scroll-top="scrollTop"> -->
          <div
            class="shopBox-item"
            v-for="(item, index) in shopList"
            :key="index"
            @click="deleteInfo(item)"
          >
            <div class="shopBox-item-img">
              <image :src="item.img || '../../static/image/logo.jpg'" mode="aspectFit"></image>
            </div>
            <span class="shopBox-item-title">{{ item.name }}</span>
            <div class="shopBox-item-num row_between">
              <div class="shopBox-item-num-price">
                ￥<span class="num">{{ item.spu[0].market_price | zeros }}</span
                ><span class="spu">/{{ item.spu[0].spu_name }}</span>
              </div>
              <div class="icons" @click.stop="addShop(index)"></div>
            </div>
          </div>
          <!-- </scroll-view> -->
        </view>
      </div>

      <!-- <view v-if="toNext" @click="toNextAction" class="tonext flex-center">{{ bottomText }}
        <text style="color: red; margin-left: 10rpx">{{
          next_category_name
        }}</text>
      </view>
      <view class="nodata" v-if="goods_list.length == 0">
        <image :src="nodataImg" mode="aspectFit"></image>
        <view>该分类暂时还没有商品~</view>
      </view> -->
      <my-addcart
        ref="minicart"
        :canshowprice="canshowprice"
        @tabBarTag="changeTabBarTag"
        @cancel="showFooter = true"
      ></my-addcart>
    </view>
    <!-- <my-tabar :types="2" ref="tabar" current="0"></my-tabar> -->
    <shopPopup @clearAll="clearAll" @close="closePopup" @changeMenu="changeMenu" :show="shopVisible" :shopList="shopCarList" @changeGoods="changeGoods" :supplierId="companyInfo.supplier_id"></shopPopup>
    <indexFooter v-if="showFooter" @toAccount="toAccount" :shopList="shopCarList" :total="shopCarTotal" @changeShopVisible="shopVisible = !shopVisible"></indexFooter>
    <my-keyboard @confirm="inputPrice" ref="keyboard" @close="showFooter = true"></my-keyboard>
  </view>
</template>

<script>
import { mapState } from "vuex";
import { $https } from "@/static/js/request.js";
import CateGorize from "@/components/CateGorize/index.vue";
import shopPopup from './components/shopPopup.vue'
import indexFooter from './components/indexFooter.vue'
// #ifdef H5
const wx = require("jweixin-module");
// #endif
// #ifdef MP-WEIXIN
let plugin = requirePlugin("WechatSI");
// #endif
export default {
  components: { CateGorize, shopPopup, indexFooter },
  computed: {
    ...mapState(["companyInfo", "currentRoute"]),
    shopLists() {
      return {
        "--length": this.shopList.length,
      };
    },
    classiLength() {
      return {
        "--classLength": this.classifiList.length,
      };
    },
    computeHeight() {
      return this.type == 1 ? "52px" : "75px";
    },
  },
  data() {
    return {
      classifiList: [],
      shopList: [],
      canshowprice: true,
      selectInfo: null,
      page: 1, // 当前页数
      count: 0, // 当前公司总数
      options: null,
      project_list: [], //精选专题图
      isReachBottom: true,
      company_info:{}, // 店家信息
      categorys:"", // 分类

      type: 2,
      secondIndex: 0,
      currentClass: 0,
      first_list: [],
      second_list: [],
      pid: null, //当前一级分类id
      category_id: null, //当前二级分类id
      next_category_id: null, //下个二级分类id
      next_category_name: "", //下个二级分类
      toNext: false,
      bottomText: "点击加载",
      indexNavid: null, //从首页导航或者banner过来
      flag: true, //onshow是否刷新
      open: false,
      newSecondIndex: 0,
      goods_list: [],
      nodataImg: getApp().globalData.nodataImg,
      goodslist: [],
      shopVisible: false,
      shopCarList: [],
      shopCarTotal: 0,
      showFooter: true, //  底部购物车
    };
  },
  filters: {
    timeFilter: function (value) {
      if (!value) return "暂无";
      return value.slice(0, 5);
    },
    zeros(num) {
      return +num.toString().replace(/(\.[0-9]*[1-9])0+$/, "$1");
    },
    spuChange(item) {
      let list = item.map((item) => Number(item.market_price)).sort();
      if (list.length == 1) {
        return list[0];
      } else {
        return list[0] + "~" + list.at(-1);
      }
    },
  },
  onLoad(options) {
    // this.page = 1;
    // if (this.companyInfo) {
    //   this.options = this.companyInfo.supplier_id;
    //   // 获取供应链商品
    //   this.getShopInfo();
    //   // 获取购物车商品
    //   // this.getCard();
    //   // 获取导航配置
    //   this.menuList();
    // } else {
    //   this.$store.commit("changeCompanyInfo", null);
    //   uni.switchTab({
    //     url: "/pages/tabar/index",
    //   });
    // }
  },

  onShow() {
    // console.log("companyInfo", this.companyInfo);
    if (this.companyInfo) {
      this.options = this.companyInfo.supplier_id || this.companyInfo.company_id;
      // 获取供应链商品
      // if (this.currentRoute != "pages/index/shopdetail") {
      this.page = 1;
      this.toNext = false;
      this.getShopInfo();
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 10, // 可选，滚动时间，默认300ms
      });
      this.goods_list = [];
      var params = {};
      this.getCard()
      if(this.category_id) params.category_id = this.category_id
      if (this.pid) {
        Object.assign(params, {
          pid: this.pid,
        });
      }
      if (this.classfi) {
        this.pid = this.classfi.nav_id;
        Object.assign(params, {
          pid: this.pid,
        });
      }
      this.getData(1, params, this.secondIndex + 1);
      // }
      this.flag = true;
      // }
      // 获取购物车商品
      // 获取导航配置
    } else {
      this.$store.commit("changeCompanyInfo", null);
      uni.switchTab({
        url: "/pages/tabar/index",
      });
    }
  },
  // watch: {
  //   currentTab() {
  //     console.log("11111");
  //     //currentTab是当前的导航栏
  //     this.isReachBottom = false;
  //   },
  // },
  methods: {
    lis(item) {
      uni.navigateTo({
        url: `/pages/index/subject?id=${item.id}&name=${item.name}`,
      });
    },

    deleteInfo(info) {
      uni.navigateTo({
        url: `/pages/index/shopdetail?id=${info.goods_id}&company_id=${this.companyInfo.supplier_id}`,
      });
    },
    menuList() {
      $https("GETN", `index?company_id=${this.options}`, {}, (res) => {
        if (res.data.errcode == 0) {
          this.categorys = res.data.data.categorys;
          this.company_info = res.data.data.company_info;
          this.classifiList = res.data.data.nav;
          // this.project_list = res.data.data.project_list;
          // this.$refs.tabar.changetag(res.data.data.all_cart_num);
        }
      });
    },
    getShopInfo(page = 1) {
      let data = {
        page: page,
        size: 16,
        company_id: this.options,
      };
      $https("GET", "getGoodsSelect", data, (res) => {
        if (res.data.errcode == 0) {
          // 获取一级分类(最多只展示10个分类,多余的自动删除)
          // let list = res.data.data.first_list
          // this.classifiList = []
          if (page == 1) {
            this.shopList = [];
          }

          res.data.data.list.forEach((item, index) => {
            this.shopList.push(item);
          });
          this.count = res.data.data.count;
        } else {
          uni.showToast({
            icon: "none",
            title: res.data.errmsg,
          });
        }
      });
    },
    // getCard() {
    //   $https("GETN", `getCart?company_id=${this.options}`, {}, (res) => {
    //     this.$refs.tabar.changetag(res.data.data.all_cart_num);
    //   });
    // },
    addShop(index) {
      this.shopVisible = true
      var data = this.shopList[index];
      this.$refs.minicart.open(data, index);
    },
    changeTabBarTag(e) {
      // console.log("222,", e);
      this.showFooter = true
      this.getCard()
      const { checked, index, num, willBuyNum } = e;
      //改变底部导航栏购物车tag
      // this.$refs.tabar.changetag(num);
      // 改变为你推荐数量
      // this.shopList[index].spu[checked].cart_num = willBuyNum;
    },
    navTo(item, index) {
      if (item.route) return;
      this.$store.commit("changeClassfi", item);
      this.$store.commit("changeCurrent", index);
      uni.switchTab({
        url: "/pages/tabar/classify",
      });
    },

    getData(page, prop, index = 1) {
      var params = {
        page: page,
        size: 15,
        company_id: this.options,
      };
      if (prop) {
        Object.assign(params, prop);
      }
      $https(
        "GET",
        "category",
        params,
        (res) => {
          let data = res.data.data;
          //商品总数
          this.count = data.count;
          // 设置一级分类，当一级分类为0时，赋值给first_list，否则跳过;并且将商品制空
          if (this.first_list.length == 0) {
            this.first_list = data.first_list;
          }
          // 设置二级分类
          this.second_list = data.second_list;
          let titles = {
            title: this.title,
          };
          if (this.toNext) {
            this.goods_list = this.goods_list.concat(titles);
            this.toNext = false;
            this.title = "";
          }
          // 设置展示的商品名称;处理价格规格sku
          if (this.top) {
            this.goods_list = { ...data.goods_list, ...this.goods_list };
          } else {
            let goods_list = this.changePrice(data.goods_list);
            this.goods_list = this.goods_list.concat(goods_list);
          }
          this.goodslist = this.goodslist.concat(data.goods_list);
          /**
           * 设置商品最后的文字展示效果
           * 判断条件：
           * 	1、商品数量大于0
           * 	2、当前商品数量是否低于总数量
           * 	3、当前secondIndex低于该二级分类总数 - 1
           * 		3.1、如果是最后一个二级分类时，应展示没有更多了
           *   

          //如果有这个id，说明是首页导航或者banner来的。默认选中那个分类
          if (this.indexNavid) {
            this.changeFirstCurrent(this.indexNavid);
          }
          /**
           * 获取下个二级分类的分类名、二级分类id
           */
          let next = this.second_list[index];
          this.next_category_name = next ? next.title : null;
          this.next_category_id = next ? next.id : null;
          this.title = next ? next.title : null;
          if (this.classfi) {
            this.secondIndex = this.first_list.findIndex((item) => {
              return item.id == this.pid;
            });
          }
          /**
           * 获取一级分类id
           * 刚进入分类页面时，需将一级分类的id赋值给pid，后续操作后pid修改
           */
          if (!this.pid && this.first_list.length) {
            this.pid = this.first_list[0].id;
          }
          this.page = page;
          // this.$refs.tabar.changetag(res.data.data.all_cart_num);
          this.top = false;
        },
        this.loginVolid
      );
    },
    // 获取购物车列表
    getCard() {
      $https(
        "GETN",
        `getCart?company_id=${this.options}`,
        {},
        (res) => {
          if (res.statusCode == 200) {
            this.shopCarList = res.data.data.listdata;
            this.shopCarTotal = res.data.data.all_cart_num
          } else {
            uni.showToast({
              icon: "none",
              title: res.data.errmsg,
            });
          }
        }
      );
    },
    //处理价格规格sku
    changePrice(data) {
      var array = JSON.parse(JSON.stringify(data));
      for (let i in array) {
        //算出价格范围
        if (array[i].spu.length > 1) {
          var min, max;
          min = array[i].spu[0].market_price;
          if (array[i].spu[1].market_price < min) {
            max = Number(array[i].spu[0].market_price);
            min = Number(array[i].spu[1].market_price);
          } else {
            max = Number(array[i].spu[1].market_price);
            min = Number(array[i].spu[0].market_price);
          }
          for (let y in array[i].spu) {
            if (Number(array[i].spu[y].market_price) < min) {
              min = Number(array[i].spu[y].market_price);
            } else if (Number(array[i].spu[y].market_price) > max) {
              max = Number(array[i].spu[y].market_price);
            }
          }
          let bol1 = array[i].spu.some((e) => {
            return e.current_price == 1;
          });
          let bol2 = array[i].spu.every((e) => {
            return e.current_price == 1;
          });
          let arr = [];
          array[i].spu.forEach((e) => {
            if (e.current_price != 1) {
              arr.push(e.market_price);
            }
          });
          let maxs = Math.max(...arr);
          let mins = Math.min(...arr);
          // console.log(max,min);
          if (bol2) {
            array[i].showPrice = "时价";
          } else if (bol1) {
            array[i].showPrice = `时价~${maxs.toFixed(2)}`;
          } else {
            array[i].showPrice = `￥${mins.toFixed(2)}~${maxs.toFixed(2)}`;
          }
          // array[i].showPrice = `￥${min.toFixed(2)}~${max.toFixed(2)}`;
        } else if (array[i].spu.length == 1) {
          if (array[i].spu[0].activity_price) {
            //活动价
            array[i].showPrice = "￥" + array[i].spu[0].activity_price;
          } else if (array[i].spu[0].current_price == 1) {
            //是时价
            array[i].showPrice = "时价";
          } else {
            array[i].showPrice = "￥" + array[i].spu[0].market_price;
          }
          //只有一个规格时显示起订量、库存
          array[i].minimum = array[i].spu[0].minimum;
          array[i].designated_inventory = array[i].spu[0].inventory_hd
            ? 11
            : array[i].spu[0].designated_inventory;
          array[i].inventory_left =
            array[i].spu[0].inventory_hd || array[i].spu[0].inventory_left;
        }
        array[i].willBuyNum = array[i].num_cart_count;
      }
      return array;
    },
    //点击一级列表
    toggleTab(index) {
      this.secondIndex = index;
      this.goods_list = [];
      this.currentClass = 0;
      this.current = 0;
      this.pid = this.first_list[index].id;
      this.category_id = this.first_list[index].selfNext[0].id; //重设二级id
      this.toNext = false;
      this.getData(1, {
        pid: this.pid,
        category_id: this.category_id,
      });
    },
    // 点击二级分类时根据获取到的二级分类下标获取二级分类id并调用获取商品接口
    change(index) {
      // 将商品列表制空
      this.goods_list = [];
      // 修改二级分类选中的样式，赋值当前选中的二级分类下标
      this.currentClass = index;
      this.current = index;
      // 将商品下面的提示语隐藏
      this.toNext = false;
      // 根据pid匹配一级分类的二级分类列表
      let category_list = this.first_list.filter(
        (item) => item.id == this.pid
      )[0];
      // 获取二级分类id
      let category_id = category_list.selfNext[index]
        ? category_list.selfNext[index].id
        : null;
      this.category_id = category_id;
      this.getData(
        1,
        {
          pid: this.pid,
          category_id: category_id,
        },
        index + 1
      );
    },
    /**
     * 点击二级分类时函数
     * id: 二级分类id
     * index: 展示的二级分类下标
     */
    selectSecond(id, index) {
      // 将商品列表制空
      this.goods_list = [];
      // 修改二级分类选中的样式，赋值当前选中的二级分类下标
      this.currentClass = index;
      this.current = index;
      // 将商品下面的提示语隐藏
      this.toNext = false;
      this.change(index);
    },
    onReachBottoms() {
      var page = this.page;
      //如果请求到底就请求下一列表
      if (this.goods_list.length < this.count) {
        page++;
        this.getData(
          page,
          {
            pid: this.pid,
            category_id: this.category_id,
          },
          this.current + 1
        );
      } else {
        this.toNext = true;
        if (!this.next_category_id) {
          this.bottomText = "没有更多啦~";
        } else {
          this.bottomText = "点击加载";
        }
      }
    },
    toNextAction() {
      // 如果没有下级id，表示不可点击。
      let index = this.current + 1;
      // 如果有下级id，表示可点击。
      if (this.next_category_id) {
        this.selectSecond(this.next_category_id, index);
      }
    },
    //跳到商品详情
    detailPage(index, id) {
      // console.log("index, id", index, id);
      uni.navigateTo({
        url: `../../pages/index/shopdetail?id=${id}&company_id=${this.companyInfo.supplier_id}`,
      });
    },
    //显示小购物车
    showCart(index, data) {
      this.showFooter = false
      this.$refs.minicart.open(data, index);
    },
    //＋
    addAction(item, index, data) {
      if (item.spu.length > 1) {
        this.showCart(index, item);
      } else {
        var index = data.index,
          min = data.min,
          limit = data.limit,
          inventory = data.inventory,
          val = data.value;
        if (val < min) {
          val = min;
        } else if (limit > 0 && val + 1 >= inventory) {
          //不能超过库存量
          val = inventory;
          uni.showToast({
            icon: "none",
            title: "库存不足",
          });
          return;
        } else {
          val++;
        }
        this.addToCart(
          this.goods_list[index].id,
          this.goods_list[index].spu[0].id,
          Number(val).toFixed(2),
          index
        );
      }
    },
    //-
    subAction(data) {
      var index = data.index,
        min = data.min,
        inventory = data.inventory,
        val = data.value;
      if (val - 1 < min) {
        val = 0;
      } else {
        val--;
      }
      // this.goods_list[data.index].willBuyNum = val;
      this.addToCart(
        this.goods_list[index].id,
        this.goods_list[index].spu[0].id,
        val.toFixed(2),
        index
      );
    },
    //输入数量
    inputPrice(data) {
      this.showFooter = true
      var val = Number(data.value),
        index = data.index;
      this.addToCart(
        this.goods_list[index].id,
        this.goods_list[index].spu[0].id,
        val.toFixed(2),
        index
      );
    },
    // 加入购物车
    addToCart(goodsId, spuId, num, index) {
      var options = {
        goods_id: goodsId.toString(),
        spu_id: spuId.toString(),
        num: num.toString(),
        company_id: this.companyInfo.supplier_id.toString()
      };
      $https("POST", "changeCart", options, (res) => {
        if (res.data.errcode == 0) {
          this.goods_list[index].willBuyNum = Number(num);
          this.shopCarTotal = res.data.data.all_cart_num
          this.getCard()
          // this.$refs.tabar.changetag(res.data.data.all_cart_num);
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      }, true, 'application/x-www-form-urlencoded');
    },
    // 去结算
    toAccount() {
      //  if (this.checkedList.length > 0 && this.allPrice > 0) {
      if (this.shopCarList.length) {
        var params = JSON.stringify(this.shopCarList.map(el => el.id));
        uni.navigateTo({
          url: `/pages/shopcart/submitorder?ids=${params}&company_id=${this.companyInfo.supplier_id.toString()}`,
        });
      } else {
        uni.showToast({
          title: "下单金额必须大于0！",
          icon: "none",
        });
      }
    },
    //  弹窗-改变商品数量
    changeGoods(index, data, total) {
      this.shopCarList[index].num = data.num
      this.shopCarTotal = total
      const i = this.goods_list.findIndex(el => el.id == data.goods_id)
      if(i !== -1) this.goods_list[i].willBuyNum = data.num
      if(+data.num < 1) this.shopCarList.splice(index, 1)
      if(!this.shopCarList.length) this.shopVisible = false
    },
    changeMenu(item) {
      const index = this.first_list.findIndex(el => el.id == item.pid)
      this.secondIndex = index;
      this.newSecondIndex = index;
      this.goods_list = [];
      this.current = 0;
      this.pid = item.pid;
      this.category_id = item.category_id; //重设二级id
      this.toNext = false;
      this.getData(1, {
        pid: this.pid,
        category_id: this.category_id,
      });
      this.shopVisible = false
      this.$nextTick(() => {
        this.currentClass = this.first_list[index].selfNext.findIndex(el => el.id == item.category_id);
      })
    },
    //  清空购物车
    clearAll() {
      this.shopVisible = false
      this.getCard()
      var params = {};
      if(this.category_id) params.category_id = this.category_id
      if (this.pid) {
        Object.assign(params, {
          pid: this.pid,
        });
      }
      this.goods_list = []
      this.getData(1, params, this.secondIndex + 1);
    },
    closePopup(val) {
      this.shopVisible = val
    }
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onReachBottom() {
    if (this.isReachBottom) return;
    //如果请求到底就请求下一列表
    if (this.shopList.length < this.count) {
      // console.log("1111", this.shopList.length, this.count, this.page);
      this.page++;
      this.getShopInfo(this.page);
    } else {
    }
  },
  onPageScroll(e) {
    this.isReachBottom = false;
  },
  onHide() {
    this.page = 1;
    this.isReachBottom = true;

    // uni.pageScrollTo({
    //   selector: ".shopBox",
    //   scrollTop: 2,
    //   duration: 300,
    // });
  },
};
</script>

<style lang="scss" scoped>
$length: var(--length) / 2;
$classLengths: var(--classLength) / 5;
.all_good_height {
  height: 100%;
}
.suggest {
  .sell {
    align-items: baseline;
    padding: 30rpx 0;
    height: 30rpx;
    image {
      width: 40rpx;
      height: 22rpx;
    }
    span {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      margin: 0 30rpx;
    }
  }
}
.top {
  width: 100%;
  height: 245rpx;
  background-image: url("../../static/images/img-bg.png");
  position: relative;
  .card {
    width: 700rpx;
    background-color: #ffffff;
    padding: 20rpx;
    border-radius: 10rpx;
    box-shadow: 0px 0px 10px 0px rgba(4, 0, 0, 0.1);
    position: absolute;
    bottom: -100rpx;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    font-family: PingFang SC;
    &-left {
      // display: flex;
      // flex-direction: column;
      // justify-content: center;
      // align-items: center;

      &-title {
        font-size: 40rpx;
        color: #000;
        font-weight: 600;
        width: 450rpx;
      }

      &-tab {
        margin-top: 10rpx;
        align-items: center;

        .tip {
          align-items: center;

          &-content {
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: $color_55;
            width: 300rpx;
          }

          &-sold {
            width: 150rpx;
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: $color_55;
            white-space: nowrap;
            text-align: right;
          }
        }

        .seg {
          width: 450rpx;
          height: 1rpx;
          background-color: #e5e5e5;
          margin-top: 20rpx;
          margin-bottom: 20rpx;
        }

        .condition {
          display: flex;
          flex-direction: row;
          align-items: center;
          width: 450rpx;
          margin-top: 10rpx;

          .title {
            font-size: 28rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #656565;
            white-space: nowrap;
          }

          .time {
            width: 193rpx;
            image {
              width: 23rpx;
              height: 23rpx;
            }
          }

          .times {
            color: #ec7821;
            margin-left: 10rpx;
          }

          .money {
            color: #ec7821;
            margin: 0 20rpx;
          }
        }

        .address {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          width: 450rpx;
          margin-top: 10rpx;

          &-info {
            width: 100%;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 500;
            color: #333333;
          }

          .iphone {
            width: 38rpx;
            height: 38rpx;
            display: flex;
            justify-content: center;
            align-items: center;

            image {
              width: 80%;
              height: 80%;
            }
          }
        }
      }

      &-rank {
        font-size: 22rpx;
        font-weight: 500;
        color: #999;
        margin-top: 20rpx;
        width: 450rpx;
      }
    }

    &-right {
      width: 94rpx;
      height: 94rpx;
      background: #ffffff;
      box-shadow: 0px 0px 4px 0px rgba(4, 0, 0, 0.1);
      border-radius: 10rpx;
      margin-right: 20rpx;
      margin-top: 20rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

/deep/.u-drawer {
  overflow: unset !important;
}

.pages {
  font-family: PingFang SC;
  position: relative;
  font-size: 24rpx;
  box-sizing: border-box;
  min-height: 100vh;
  background: #f6f6f6;

  .bg_img {
    width: 750rpx;
    height: 120rpx;
    position: absolute;
    background-color: #fff;
    z-index: 0;
  }

  .contents {
    width: 100%;
    margin-top: var(--status-bar-height);

    .contents-shop {
      width: 100%;
      background-color: #fff;
      // padding: 20rpx;
      padding-top: 120rpx;
      display: flex;
      align-items: center;
      .shop {
        width: 100%;
        display: flex;
        align-items: center;
        .shop-image {
          width: 180rpx;
          height: 180rpx;
          margin: 0 10rpx;
        }
        .shop-info {
          display: flex;
          width: 340rpx;
          flex-direction: column;
          border-bottom: 1rpx solid #ebebeb;
          position: relative;
          padding: 32rpx 0 0 0;
          box-sizing: border-box;
          .title {
            width: 300rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            height: 28rpx;
            line-height: 28rpx;
            color: #333333;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp: 1;
          }
          .remarks {
            width: 300rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            height: 22rpx;
            line-height: 22rpx;
            color: #cccccc;
            margin-top: 8rpx;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp: 1;
          }
          .shop-info-tips {
            display: flex;
            flex-direction: row;
            width: 164rpx;
            overflow: hidden;
            div {
              border: 1rpx solid;
              margin-right: 10rpx;
              border-radius: 4rpx;
              box-sizing: border-box;
              font-size: 18rpx;
              min-width: 48rpx;
              &:first-child {
                color: #f55726;
              }
              &:nth-child(2) {
                color: #40ae36;
              }
            }
          }
          .shop-info-rise {
            margin-top: 8rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            height: 22rpx;
            line-height: 22rpx;
            color: #cccccc;
            margin-right: 10rpx;
          }
          .shop-info-price {
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 32rpx;
            color: #f55726;
            display: flex;
            align-items: center;
            position: relative;
            height: 48rpx;
            line-height: 48rpx;
            margin: 16rpx 0 8rpx;
            .icon {
              font-size: 18rpx;
            }
          }
          .shop-info-btn {
            position: absolute;
            bottom: 0;
            right: 0;
          }
        }
      }
    }
    

    .topics {
      margin: 30rpx 20rpx 20rpx 20rpx;
      font-family: PingFang SC;
      padding: 20rpx 15rpx;
      background-color: #fff;
      border-radius: 10rpx;

      .Selected {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333333;
      }

      .images {
        // display: flex;
        margin-top: 20rpx;
        position: relative;
        .lis1 {
          position: relative;
          margin-right: 10rpx;
          border-radius: 10rpx;
        }
        .lis2 {
          position: absolute;
          border-radius: 10rpx;
          height: 150rpx;
        }
        .lis3 {
          position: relative;
          border-radius: 10rpx;
          height: 150rpx;
          // margin-bottom: 10rpx;
        }
      }
    }

    .shopBox {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat($length, 300rpx);
      gap: 20rpx;
      padding: 0 30rpx;

      &-item {
        width: 334rpx;
        // height: 360rpx;
        border-radius: 20rpx;
        background-color: #fff;

        &-img {
          width: 100%;
          height: 300rpx;
          margin: 20rpx auto 0;
          border-radius: 20rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        &-title {
          padding: 0 30rpx;
          font-size: 32rpx;
          font-weight: bold;
          color: #333333;
          display: inline-block;
          width: calc(100% - 40rpx);
          white-space: pre-wrap;
          margin: 10rpx auto 0;
          font-family: PingFang SC;
        }

        &-num {
          align-items: center;
          padding: 0 20rpx 20rpx;
          margin: 20rpx auto 0;

          &-price {
            font-size: 22rpx;
            color: #f55726;
            font-family: PingFang SC;
            font-weight: bold;
            .num {
              font-size: 32rpx;
            }
            .spu {
              font-size: 22rpx;
            }
          }

          .icons {
            width: 44rpx;
            height: 44rpx;
            background-color: #40ae36;
            text-align: center;
            line-height: 44rpx;
            border-radius: 50%;
            background-image: url("../../static/images/gouwuche2.png");
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}

/deep/.uniui-star-filled {
  color: #12a38c !important;
}
</style>
